<template>
  <div class="header">
    <div class="nav">
      <div class="nav-left">
        <ul class="nav nav-pills">
          <li role="presentation" class="Brand logo" @click="clickArticleList">
            <router-link role="presentation" to="/articleList">
              <span>
                <img src="" alt="">
              </span>
                <span class="logo">C&nbsp;Blog</span>
            </router-link>
          </li>
          <li role="presentation" class="link" @click="clickArticleList">
            <router-link role="presentation" to="/articleList">文章</router-link>
          </li>
          <li role="presentation" class="link" @click="clickDiscuss">
            <router-link role="presentation"  to="/discuss">讨论</router-link>
          </li>
          <li role="presentation" class="link" @click="clickShare" >
            <router-link role="presentation" to="/share">分享</router-link>
          </li>
          <li role="presentation" class="link" @click="clickDocument">
            <router-link role="presentation" to="/document">文档</router-link>
          </li>
          <li role="presentation" class="link" @click="clickReward">
            <router-link role="presentation" to="/reward">打赏</router-link>
          </li>
          <li role="presentation" class="link" @click="clickMarkdown">
            <router-link role="presentation" to="/markdown">What is Markdown?</router-link>
          </li>
        </ul>
      </div>



      <div class="nav-right">
        <!--<ul class="nav nav-pills nav-right">-->
        <!--&lt;!&ndash;<li role="presentation" class="link">&ndash;&gt;-->
        <!--&lt;!&ndash;<router-link role="presentation" to="">&ndash;&gt;-->
        <!--&lt;!&ndash;<inputSearch></inputSearch>&ndash;&gt;-->
        <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <!--<li role="presentation" class="link" @click="clickLogin">-->
        <!--<router-link role="presentation" to="/login">登录</router-link>-->
        <!--</li>-->
        <!--<li role="presentation" class="link" @click="clickRegist">-->
        <!--<router-link role="presentation" to="/regist">注册</router-link>-->
        <!--</li>-->
        <!--<li @click="clickWrite" class="articleLi">-->
        <!--<router-link role="presentation" to="articleWrite">-->
        <!--<span class="btn btn-primary btn-lg writeBtn" role="button"><i class="fa fa-pencil"></i> 写文章</span>-->
        <!--</router-link>-->
        <!--</li>-->
        <!--</ul>-->

        <ul class="nav nav-pills nav-right" v-if="role==='unLogin'">
          <li role="presentation" class="link" @click="clickLogin">
            <router-link role="presentation" to="/login">登录</router-link>
          </li>
          <li role="presentation" class="link" @click="clickRegist">
            <router-link role="presentation" to="/regist">注册</router-link>
          </li>
        </ul>

        <ul class="nav nav-pills nav-right" v-else-if="role==='root'">
          <li @click="clickWrite" class="articleLi">
            <router-link role="presentation" to="articleWrite">
              <span class="btn btn-primary btn-lg writeBtn" role="button"><i class="fa fa-pencil"></i> 写文章</span>
            </router-link>
          </li>
        </ul>

        <ul class="nav nav-pills nav-right" v-else-if="role==='user'">
          <li role="presentation" class="link">
            <button class="userMsg">欢迎,巨严肃&nbsp;&nbsp;<span class="fa fa-caret-down"></span></button>
          </li>
        </ul>
      </div>

      <div v-if="!hide">
        <div>
          <div class="headerContent" v-if="!isFriendshipLinkClick">
            <header-content-com :msg1="msg1" :msg2="msg2"></header-content-com>
          </div>
        </div>
        <div v-if="isFriendshipLinkClick">
          <header-content-com msg1='友情链接' msg2=""></header-content-com>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import headerContentCom from './headerContent.vue'
  export default {
    name: 'header',
    components: {
      headerContentCom
    },
    props: ['isFriendshipLinkClick', 'role'],
    data: function () {
      return {
        msg1: 'Nothing is impossible.',
        msg2: 'https://git.oschina.net/xiaokangcheng',
        hide: false,
        apiUrl: 'http://localhost:8080/article/getArticleList.do?account=root'
      }
    },
    methods: {
      clickArticleList () {
        this.msg1 = 'Nothing is impossible.'
        this.msg2 = 'https://git.oschina.net/xiaokangcheng'
        this.isFriendshipLinkClick = false
        this.hide = false
        this.$http.get(this.apiUrl).then(response => {
          console.log(response.data)
//          this.$set('articleData', response.data)
        }).catch(function (response) {
          console.log(response)
        })
      },
      clickDiscuss () {
        this.msg1 = '问题讨论'
        this.msg2 = '欢迎，提出各种问题'
        this.isFriendshipLinkClick = false
        this.hide = false
      },
      clickShare () {
        this.msg1 = '每日小分享'
        this.msg2 = 'Everything is here.'
        this.isFriendshipLinkClick = false
        this.hide = false
      },
      clickDocument () {
        this.msg1 = 'Doc'
        this.msg2 = ''
        this.isFriendshipLinkClick = false
        this.hide = false
      },
      clickReward () {
        this.msg1 = '打赏我'
        this.msg2 = '如果你觉得该项目对你有助，不妨打赏我一下，这样我就有更大的动力去完善它，优化它。'
        this.isFriendshipLinkClick = false
        this.hide = false
      },
      clickMarkdown () {
        this.msg1 = 'Markdown入门'
        this.msg2 = 'What is markdown?'
        this.isFriendshipLinkClick = false
        this.hide = false
      },
      clickLogin () {
        this.msg1 = '登录'
        this.msg2 = ''
        this.isFriendshipLinkClick = false
        this.hide = true
      },
      clickRegist () {
        this.msg1 = '注册'
        this.msg2 = ''
        this.isFriendshipLinkClick = false
        this.hide = true
      },
      clickWrite () {
        this.isFriendshipLinkClick = false
        this.msg1 = '来写文章吧'
        this.msg2 = ''
        this.hide = false
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .nav
    margin-left 55px
    margin-right 70px
    .nav a
      color #fff
  .header
    background-color #9caebf
  .nav-left
    float left
  .nav-right
    float right
  .logo
    font-size 22px
    margin-top 8px
    margin-right 15px
  .link
    margin-top 15px
  .writeBtn
    border-radius 40px
    margin-top 10px
    margin-left 5px
    background-color #628cb1
    border-color #628cb1
  .articleLi
    padding 0px
    background-color #9caebf
    margin-top -10px
  .articleLi a:hover
    background-color #9caebf
  .articleLi a:visited
    background-color #9caebf
  .userMsg
    margin-top 10px
    background-color #9caebf
    border none
    color: #fff
  .userMsg:focus
    outline-color #9caebf
</style>
